import { useLoad } from '@tarojs/taro';
import { useMemo, useState } from 'react';
import OurInput from '@/common/ourComponents/ourInput';
import OurSelect from '@/common/ourComponents/ourSelect';
import OurButton from '@/common/ourComponents/ourButton';
import OurLoading from '@/common/ourComponents/ourLoading';
import calculateService from '@/modules/calculate/index.service';

import { toast } from '@/common/utils/toast';

import './index.scss';

export default function Index() {
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState<FormDataInterface>({});

  const [result, setResult] = useState<CalculateResponseInterface | null>(null);

  const baseValue = useMemo(() => {
    return Number(formData.current) || 0;
  }, [formData]);

  useLoad(() => {
    console.log('Page loaded.');
  });

  const changeFormData = (type: keyof FormDataInterface) => {
    return (val) => {
      !!result && setResult(null);
      const realValue = typeof val !== 'object' ? val : val.detail.value;
      setFormData({ ...formData, [type]: Number(realValue) });
    };
  };

  const verifyFormData = () => {
    const { type, current, max, want } = formData;
    if (
      !type ||
      !current ||
      !max ||
      !want ||
      baseValue > 25 ||
      baseValue < 0 ||
      Number(max) > 25 ||
      Number(max) < baseValue ||
      Number(want) > 25 ||
      Number(want) < baseValue
    ) {
      return false;
    }
    return true;
  };

  const submit = async () => {
    verifyFormData();
    if (!verifyFormData()) {
      // console.log('有错误');
      toast('请检查输入');
      return;
    }
    setLoading(true);
    const res = await calculateService.calculate(formData);
    setLoading(false);
    setResult(res.data);
  };

  return (
    <div className="index">
      <OurLoading isShowLoading={loading} />
      <div className="top"></div>
      <div className="content">
        <OurSelect
          label="修炼类型"
          style={{ textAlign: 'center' }}
          className="formItem"
          name="type"
          value={formData.type}
          onChange={changeFormData('type')}
          options={[
            { value: 1, label: '攻/法' },
            { value: 2, label: '双抗' },
          ]}
        />
        <OurInput
          label="当前修炼等级"
          style={{ textAlign: 'center' }}
          type="number"
          name="current"
          className="formItem"
          value={formData.current?.toString()}
          showError={baseValue > 25 || baseValue < 0}
          onChange={changeFormData('current')}
        />
        <OurInput
          label="当前修炼上限"
          name="max"
          type="number"
          style={{ textAlign: 'center' }}
          className="formItem"
          value={formData.max?.toString()}
          showError={
            Number(formData.max) > 25 || Number(formData.max) < baseValue
          }
          onChange={changeFormData('max')}
        />

        <OurInput
          label="目标修炼等级"
          name="want"
          type="number"
          style={{ textAlign: 'center' }}
          className="formItem"
          value={formData.want?.toString()}
          showError={
            Number(formData.want) > 25 || Number(formData.want) < baseValue
          }
          onChange={changeFormData('want')}
        />

        <OurButton className="formBtn" onClick={submit}>
          开始计算
        </OurButton>

        {!!result && (
          <div className="resultContainer">
    
            <div className="resultItem">
              <div className="title">所需修炼经验:</div>
              <div className="value">{result.experience}</div>
            </div>
            <div className="resultItem">
              <div className="title">消耗金钱:</div>
              <div className="value">{result.cost}万</div>
            </div>
          </div>
        )}
      </div>
      <div className="bottom"></div>
    </div>
  );
}
